<template>
    <div class="itemLegend">
        <div class="loading" v-if="pageStat">
            <Loading></Loading>
        </div>
        <div class="content" v-if="!pageStat">
            <Title titleName="收藏"></Title>
            <ul>
                <li v-for="item in itemLegend" :key="item.nodeName" @click="selectItem(item)">
                    <img :src="item.nodeImg" class="nodeImg">
                    <span class="nodeName">{{item.nodeName}}</span>
                    <span class="nodeDescription">{{item.nodeDescription}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import Loading from '@/components/loading/Loading.vue'
    import Title from '@/components/title/Title.vue'

    export default {
        data() {
            return {
                pageStat: true,
                itemLegend: [],
                pageCount: 0
            }
        },
        components: {
            Loading,
            Title
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                console.log(this.$route.params.id)
                this.request(this.$route.params.id)

            },
            selectItem(item) {
                var id = item.id
                if (item.nodeDescription == "") {
                    this.$router.push({
                        name: "LegendDetail",
                        params: {
                            id
                        },
                    });

                } else {
                    var flag = this.$route.params.flag
                    this.$router.push({
                        name: "ItemLegends",
                        params: {
                            id,
                            flag
                        },
                    });

                }

            },
            request(id) {
                axios
                    .get("/api/getItemsLegend", {
                        params: {
                            id: id
                        }
                    })
                    .then((res) => {
                        console.log(res.data);
                        this.itemLegend = res.data;
                        this.$nextTick(() => {
                            this.pageStat = false
                        })
                    })
                    .catch((err) => {
                        console.error(err);
                    });
            },
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped>
    .loading {
        height: 718px;
        overflow: hidden;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        color: white;
        justify-content: space-between;
    }

    li {
        width: 170px;
        border: 1px solid #ccc;
        margin: 7px;
        text-align: center;
    }

    li span {
        display: block;
    }

    .nodeName {
        font-size: 30px;
        font-weight: bold;
    }

    .nodeDescription {
        font-size: 15px;
        padding: 5px;
    }

    .title {
        color: white;
        width: 100%;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 45px;
        text-align: center;
        padding: 5px;
        border-bottom: 1px #ccc solid;

    }
</style>